<template>
  <view>
    <view class="wrap">
      <view class="u-tabs-box">
        <u-tabs-swiper ref="tabs" :current="current" :list="list" @change="tabsChange" gutter="150" bar-width="50" :is-scroll="false" swiperWidth="750">
        </u-tabs-swiper>
      </view>
      <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <scroll-view  scroll-y style="height: 100%;width: 100%;">
            <view class="page-box">
              <text>地图页</text>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
            <view class="page-box">
              <text>总体情况</text>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
            <view class="page-box">
              <text>详细信息</text>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
          name: '地图'
        }, {
          name: '总体信息'
        }, {
          name: '详细情况'
        }],
        current: 0,
        swiperCurrent: 0,
        scrollTop: 0,
        dx: 0,
        tabsHeight: 0,

      }
    },
    onLoad() {

    },
    methods: {
      toLogin() {
        uni.navigateTo({
          url: "/pages/index/map",
          // url:"../component/classdetails/classdetails?newsid="+ newsid,
        });
      },
      tabsChange(index) {
        this.swiperCurrent = index;
      },
      // swiper-item左右移动，通知tabs的滑块跟随移动
      transition({
        detail: {
          dx
        }
      }) {
        this.$refs.tabs.setDx(dx);
      },
      // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
      // swiper滑动结束，分别设置tabs和swiper的状态
      animationfinish({
        detail: {
          current
        }
      }) {
        this.$refs.tabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      },
      // scroll-view到底部加载更多
      onreachBottom() {
      
      }
    },
    
  }
</script>

<style lang="scss" scoped>
  .wrap {
  	display: flex;
  	flex-direction: column;
  	height: calc(100vh - var(--window-top));
  	width: 100%;
  }
  .swiper-box {
  	flex: 1;
  }
  .swiper-item {
  	height: 100%;
  }
</style>
